<template>
  <div>
      <!-- adv广告 -->
    <van-row class="advList">
      <van-col class="advItem" v-for="(policy) in policyDescList" :key="policy.desc">
        <i class="icon" :style="{backgroundImage: 'url('+ policy.icon +')'}"></i>
        <span>{{policy.desc}}</span>
      </van-col>
    </van-row>

    <!-- categoryList分类 -->
    <van-grid class="categoryList" :column-num="5" :border="false">
      <van-grid-item class="categoryItem" v-for="kingKong in kingKongModule.kingKongList" :key="kingKong.picUrl">
        <img class="catImg" :src="kingKong.picUrl" />
        <div class="catText">{{kingKong.text}}</div>
      </van-grid-item>
    </van-grid>

    <!-- 促销活动 -->
    <div class="sale" v-for="(item) in floorList" :key="item.id" >
      <!-- <div class="saleItem" :style="{backgroundImage: 'url('+ item.picUrl+')'}"> -->
      <div class="saleItem" >
        <img :src="item.picUrl" alt="" /> 
      </div>
    </div>

    <!-- News新人专享礼-->
    <div class="news">
      <div class="text">
        <span>-</span>
        <span class="reduce">新人专享礼</span>
        <span>-</span>
      </div>
      <div class="content">
        <div class="left">
          <div class="leftTxt">新人专享礼包</div>
          <div class="leftImg">
            <img src="@/assets/sales/news.png" alt="">
          </div>
        </div>
        <div class="right" >
          <div class="rightT rightB" v-for="(activity) in indexActivityModule" :key="activity.title">
            <div>
              <div class="title">{{activity.title}}</div>
              <div class="subTitle">{{activity.subTitle}}</div>
              <div class="tag" style="color:#fff;fontSize:10px; backgroundColor: #cbb693;">{{activity.tag}}</div>
            </div>
            <div class="picUrl">
              <img :src="activity.picUrl" alt="">
              <div class="discount">
                <div class="line1">{{activity.activityPrice}}</div>
                <div class="line2">{{activity.originPrice}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 类目热销榜 -->
    <div class="hotSell">
      <div class="hotHeader">{{categoryHotSellModule.title}}</div>
      <div class="hotMian">
        <div class="hotBig">
          <div class="hotBigItem" v-for="(bigCate) in bigList" :key="bigCate.categoryName">
            <span class="hotTxt">{{bigCate.categoryName}}</span>
            <span class="line"></span>
            <img class="hotImg" :src="bigCate.picUrl" alt="">
          </div>
        </div>
        <div class="hotList">
          <div class="hotItem" v-for="(cate) in hotList" :key="cate.categoryName">
            <span class="hotText">{{cate.categoryName}}</span>
            <img class="hotImg" :src="cate.picUrl" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- main的底部 -->
    <div class="bottomBox">
      <div class="left">
        <img class="bottomImg" :src="banner.picUrl" alt="">
        <div class="bottomText">
          <span class="title">{{banner.title}}</span>
          <span class="desc">{{banner.desc}}</span>
        </div>
      </div>
      <div class="right">
        <div class="bottomText">
          <span class="title">{{itemList.title}}</span>
          <span class="desc">{{itemList.desc}}</span>
        </div>
        <div class="bottomImg" v-for="(item) in itemList.itemPicBeanList" :key="item.itemId">
          <img class="left" :src="item.picUrl" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue';
export default defineComponent({
  name:'Main'
})
</script>
<script lang="ts" setup>
import {onMounted, watch} from 'vue';
// import {ref} from 'vue';
// import indexApi from '@/api/home';
// import type {SceneLightShoppingGuideData} from '@/api/home'
// 从pinia中拿数据 
import {useHomeStore} from '@/stores/home';
import { storeToRefs } from 'pinia';
const homeStore = useHomeStore(); //获取仓库

// 1. 类目热销榜数据 categoryHotSellModule(整理数据bigList，hotList)
// 2. 新人专享礼数据 indexActivityModule
// 3. 分类列表数据 kingKongModule
// 4. adv广告数据 policyDescList
// 5. sales促销数据 floorList
let {categoryHotSellModule, 
  indexActivityModule, 
  kingKongModule,
  policyDescList, 
  floorList,
  bigList,
  hotList,
  banner,
  itemList,
  } = storeToRefs(homeStore);
// 挂载
onMounted(async () => {
  homeStore.getIndex();
})
</script>

<style lang="less" scoped>
    // adv广告
    .advList{
      display: flex;
      justify-content: space-around;
      padding: 10px;
      .advItem{
        font-size: 14px;
        display: flex;
        align-items: center;
        i.icon{
          display: inline-block;
          background-repeat: no-repeat;
          background-size: 100%;
          width: 16px;
          height: 16px;
          // vertical-align: middle;
        }
        i.icon_1{
          background-image: url('../../assets/icons/adv_icon1.png');
        }
        i.icon_2{
          background-image: url('../../assets/icons/adv_icon2.png');
        }
        i.icon_3{
          background-image: url('../../assets/icons/adv_icon3.png');
        }
      }
    }
    // categoryList分类
    .categoryList{
      .categoryItem{
        width: 55px;
        height: 78px;
        --van-grid-item-content-padding: 5px;
        // --van-grid-item-icon-size: 55px;
        // --van-grid-item-text-font-size: 12px;
        .catImg{
          width: 55px;
          height: 55px;
        }
        .catText{
          font-size: 12px;
        }
      }
    }
    // sales促销
    .sale{
      height: 66px;
      margin-top: 10px;
      width: 100%;
      img{
        height: 66px;
        width: 100%;
      }
    }
    // 新人专享礼
    .news{
      height: 260px;
      .text{
        text-align: center;
        padding: 5px;
        .reduce{
          font-size: 18px;
          padding: 0 10px;
        }
      }
      .content{
        display: flex;
        justify-content: space-around;
        padding: 0 10px;
        margin: 5px 0;
        box-sizing: border-box;
        .left{
          width: 170px;
          height: 217px;
          // border: 1px solid black;
          background-color: #f9e9cf;
          .leftTxt{
            font-size: 16px;
            padding: 10px;
          }
          .leftImg{
            margin: 15px auto;
            width: 129px;
            height: 129px;
            img{
              width: 129px;
              height: 129px;
            }
          }
        }
        .right{
          width: 170px;
          height: 220px;
          // border: 1px solid brown;
          box-sizing: border-box;
          .rightT{
            height: 108px;
            // border: 1px solid green;
            padding: 10px;
            margin-bottom: 3px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-around;
            background-color: #fbe2d3;
            border-radius: 5px;
            .title{
              font-size: 14px;
              padding-top: 10px;
            }
            .subTitle{
              font-size: 10px;
            }
            .picUrl{
              position: relative;
              margin: 10px 10px;
              width: 70px;
              height: 70px;
              img{
                width: 70px;
                height: 70px;
              }
              .discount{
                position: absolute;
                top: -18px;
                left: 35px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                // border: 1px solid red;
                background-color: #f6a447;
                padding: 5px;
                box-sizing: border-box;
                div{
                  font-size: 12px;
                  color: white;
                  text-align: center;
                }
                .line2{
                  text-decoration-line: line-through;
                }
              }
            }
          }
         .rightB{
            background-color: #ffecc2;
          }
        }
      }
    }
    // 类目热销榜
    .hotSell{
      padding: 0 15px;
      margin-top: 10px;
      .hotHeader{
        font-size: 16px;
        line-height: 50px;
        text-align: left;
        color: #333;
      }
      .hotMian{
      .hotBig{
        display: flex;
        .hotBigItem{
          width: 50%;
          background-color: #f9f3e4;
          height: 100px;
          position: relative;
          margin-right: 5px;
          padding: 25px 15px;
          box-sizing: border-box;
          .hotTxt{
            font-size: 14px;
            color: #333;
          }
          
          .line{
            width: 10px;
            height: 1px;
            background-color: black;
          }
          .hotImg{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .r{
          background-color: #ebeff6;
        }
      }
      .hotList{
          margin-top: 5px;
          display: flex;
          flex-wrap: wrap;
          .hotItem{
            width: 81px;
            height: 90px;
            background-color: #f5f5f5;
            margin: 0 5px 5px 0;
            display: flex;
            flex-direction: column;
            .hotText{
              font-size: 12px;
              color: #333;
              margin-top: 5px;
              height: 18px;
              line-height: 18px;
              text-align: center;
            }
            .hotImg{
              width: 60px;
              height: 60px;
              padding: 0 10px;
            }
          }
        }
      }
    }
    // main的底部
     .bottomBox{
      padding: 15px;
      display: flex;
      .left{
        width: 171.5px;
        height: 132px;
        position: relative;
        background-color: #f5f5f5;
        margin-right: 2px;
        .bottomImg{
          width: 171.5px;
          height: 132px;
        }
        .bottomText{
          display: flex;
          flex-direction: column;
          position: absolute;
          top: 15px;
          left: 15px;
          .title{
            font-size: 16px;
            color: #333;
          }
          .desc{
            font-size: 12px;
            color: #7f7f7f;
          }
        }
      }
      .right{
        width: 171.5px;
        height: 132px;
        background-color: #f5f5f5;
        .bottomText{
          display: flex;
          flex-direction: column;
          margin: 15px 0 0 15px;
          .title{
            font-size: 16px;
            color: #333;
          }
          .desc{
            font-size: 12px;
            color: #ff6f0f;
          }
        }
        .bottomImg{
          display: flex;
          justify-content: space-evenly;
          float: left;
          overflow: hidden;
          .left{
            width: 75px;
            height: 75px;
            margin-right: 2px;
          }
        }
      }
    }
    
</style>
